<template>
  <div>
    <el-select style="width: 230px" filterable v-model="province" placeholder="选择省" @change="handleProvinceChange">
      <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>

    <el-select style="width: 230px" filterable v-model="city" placeholder="选择市" @change="handleCityChange">
      <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>

    <el-select style="width: 230px" filterable v-model="district" placeholder="选择区/县" @change="handleDistrictChange">
      <el-option v-for="item in districtList" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>
  </div>
</template>

<script>
import { getByParent } from "@/api/gonitis/district";

export default {
  components: {},
  props: {},
  data() {
    return {
      address: "",
      province: "",
      city: "",
      district: "",
      oneLevelCode: "",
      twoLevelCode: "",
      threeLevelCode: "",
      provinceList: [],
      cityList: [],
      districtList: []
    };
  },
  //方法集合
  methods: {
    setAddress(value) {
      this.address = value;
      const chars = value.split("/");
      this.province = chars[0];
      this.city = chars[1];
      this.district = chars[2];
    },
    handleProvinceChange(value) {
      this.province = value.name;
      this.city = "";
      this.district = "";
      this.cityList = [];
      this.districtList = [];
      this.$emit("getAddress", "");
      this.getCityList(value.code);
    },
    handleCityChange(value) {
      this.city = value.name;
      this.districtList = [];
      this.district = "";
      this.$emit("getAddress", "");
      this.getDistrictList(value.code);
    },
    handleDistrictChange(value) {
      this.district = value.name;
      this.address = this.province + "/" + this.city + "/" + this.district;
      // 调用父组件中的方法给父组件中的参数赋值
      this.$emit("getAddress", this.address);
    },
    /** 获取区县集合 */
    getDistrictList(parent) {
      getByParent(parent).then(response => {
        this.districtList = response.data;
      });
    },
    /** 获取市级信息集合 */

    getCityList(parent) {
      getByParent(parent).then(response => {
        this.cityList = response.data;
      });
    },

    // 获取省级信息集合
    getProvinceList() {
      const parent = 86;
      getByParent(parent).then(response => {
        this.provinceList = response.data;
      });
    }
  },

  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getProvinceList();
  }
};
</script>
<style scoped>
</style>